<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="10" style="padding: 10px; background-color: #fff">
      <el-col :span="6">
        <div class="chart-wrapper">
          <qualification :selJobDataEduList="selJobDataEduList" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-wrapper">
          <experience :selJobDataExpList="selJobDataExpList" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-wrapper">
          <workNature :selJobDataNatureList="selJobDataNatureList" />
        </div>
      </el-col>
      <el-col :span="6">
        <div class="chart-wrapper">
          <PositionSalary :selJobDataWageList="selJobDataWageList" />
        </div>
      </el-col>
    </el-row>
    <el-row style="margin: 10px; background-color: #fff" class="chart-wrapper">
      <el-col :span="12">
        <areas :selJobDataAddressList="selJobDataAddressList" />
      </el-col>
      <el-col :span="12">
        <el-table :data="selJobDataAddressList" style="width: 100%" border>
          <el-table-column
            type="index"
            prop="prop"
            label="排名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="地区"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="count"
            label="职位数"
            width="width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 10px; background-color: #fff" class="chart-wrapper">
      <el-col :span="12">
        <PositionClassification :selJobDataTypeList="selJobDataTypeList"/>
      </el-col>
      <el-col :span="12">
        <el-table :data="selJobDataTypeList" style="width: 100%" border>
          <el-table-column type="index" prop="prop" label="排名" width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="职位分类" width="width" align="center">
          </el-table-column>
          <el-table-column prop="count" label="职位数" width="width" align="center">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row style="margin: 10px; background-color: #fff" class="chart-wrapper">
      <addTrend :selJobDataAddList="selJobDataAddList"/>
    </el-row>
    <el-row style="margin: 10px; background-color: #fff" class="chart-wrapper">
      <liveness :selJobDataActiveList="selJobDataActiveList"/>
    </el-row>
  </div>
</template>

<script>
import qualification from "./components/qualification";
import experience from "./components/experience";
import workNature from "./components/workNature";
import PositionSalary from "./components/PositionSalary";
import areas from "./components/area";
import PositionClassification from "./components/PositionClassification";
import addTrend from "./components/addTrend";
import liveness from "./components/liveness";
import {
  selJobDataEduApi,
  selJobDataExpApi,
  selJobDataNatureApi,
  selJobDataWageApi,
  selJobDataAddressApi,
  selJobDataTypeApi,
  selJobDataActiveApi,
  selJobDataAddApi,
} from "@/api/portrait";
export default {
  components: {
    qualification,
    experience,
    workNature,
    PositionSalary,
    areas,
    PositionClassification,
    addTrend,
    liveness,
  },
  data() {
    return {
      selJobDataEduList: [],
      selJobDataExpList: [],
      selJobDataNatureList: [],
      selJobDataWageList: [],
      selJobDataAddressList: [],
      selJobDataTypeList: [],
      selJobDataActiveList: [],
      selJobDataAddList: [],
    };
  },
  created() {
    this.selJobDataEdu();
    this.selJobDataExp();
    this.selJobDataNature();
    this.selJobDataWage();
    this.selJobDataAddress();
    this.selJobDataType();
    this.selJobDataActive();
    this.selJobDataAdd();
  },
  methods: {
    // 学历要求分布
    async selJobDataEdu() {
      const res = await selJobDataEduApi();
      this.selJobDataEduList = res.data;
    },
    // 经验要求分布
    async selJobDataExp() {
      const res = await selJobDataExpApi();
      this.selJobDataExpList = res.data;
    },
    // 工作性质分布
    async selJobDataNature() {
      const res = await selJobDataNatureApi();
      this.selJobDataNatureList = res.data;
    },
    // 职位薪资分布
    async selJobDataWage() {
      const res = await selJobDataWageApi();
      this.selJobDataWageList = res.data;
    },
    // 职位地区分布
    async selJobDataAddress() {
      const res = await selJobDataAddressApi();
      this.selJobDataAddressList = res.data;
    },
    // 职位分类分布
    async selJobDataType() {
      const res = await selJobDataTypeApi();
      this.selJobDataTypeList = res.data;
    },
     // 职位新增趋势
    async selJobDataAdd() {
      const res = await selJobDataAddApi();
      this.selJobDataAddList = res.data;
    },
    // 职位活跃度分析
    async selJobDataActive() {
      const res = await selJobDataActiveApi();
      this.selJobDataActiveList = res.data;
    },
   
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.el-table {
  max-height: 300px;
  overflow-y: auto;
}
</style>
